<template>
  <div class="moduleTitle" :style="{ backgroundImage }">
    <div class="titleName" @click="link(name)">{{ name }}</div>
    <slot />
  </div>
</template>

<script>
export default {
  name: 'ModuleTitle',
  props: {
    // 模块标题
    name: {
      type: String,
      default: '',
    },
  },
  computed: {
    backgroundImage() {
      const img = require(`@/assets/images/screen/moduleTitle.png`)
      return `url(${img})`
    },
  },
  methods: {
    // eslint-disable-next-line vue/no-dupe-keys
    link(name) {
      console.log(name)
      if (name == '数据标准') {
        this.$router.push('/standardsystem')
      } else if (name == '数据质检') {
        this.$router.push('/rules')
      } else if (name == '数据服务') {
        this.$router.push('/marketApi')
      }
    },
  },
}
</script>

<style lang="scss" scoped>
.moduleTitle {
  z-index: 999;
  font-family: Source Han Sans SC;
  font-weight: bold;
  font-size: 0.9375vw;
  color: #ffffff;
  height: 2.7778vh;
  width: 22.3438vw;
  // background-image: url('~@/assets/images/moduleTitle.png');
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 100% 100%;
  box-sizing: border-box;
  position: relative;
  margin: 0vh auto 0.9259vh;
  .titleName {
    cursor: pointer;
    position: absolute;
    left: 13%;
    top: -20%;
  }
}
</style>
